<template>
  <el-button type="primary" @click="handleExportClick" :loading="loading">
    <slot name="button"></slot>

    <!-- 导出弹框组件 -->
    <tool-export
      ref="exportRef"
      :locale="lang"
      :cache-key="exportConfig.tableName"
      :columns="columns"
      :defaultDataType="'data'"
      :datasource="null"
      :selections="null"
      :table-name="exportConfig.tableName"
      :default-file-name="exportConfig.fileName"
      :table-state="tableState"
      :show-summary="showSummary"
      :tree-props="treeProps"
      :before-export="beforeExport"
    />
  </el-button>
</template>

<script setup>
import { ref, defineProps } from "vue";
import ToolExport from "@/../components/ele-pro-table/components/tool-export.vue";
import { useLocale } from "@/../components/ele-config-provider/receiver";

// 定义props
const props = defineProps({
  exportConfig: {
    type: Object,
    required: true,
    default: () => ({
      fileName: "导出数据",
      tableName: "defaultTable",
    }),
  },
  columns: {
    type: Array,
    default: () => [],
  },
  datasource: {
    type: [Array, Function],
    default: () => [],
  },
  selections: {
    type: Array,
    default: () => [],
  },
  tableState: {
    type: Object,
    default: () => ({}),
  },
  showSummary: {
    type: Boolean,
    default: false,
  },
  treeProps: {
    type: Object,
    default: () => ({}),
  },
  beforeExport: {
    type: Function,
  },
});

const { lang } = useLocale("table", props);

// 导出弹框引用
const exportRef = ref(null);
const loading = ref(false);

// 处理导出按钮点击
const handleExportClick = () => {
  if (exportRef.value) {
    loading.value = true;
    // 延迟一下以避免loading状态不显示
    setTimeout(() => {
      exportRef.value.openModal();
      loading.value = false;
    }, 100);
  }
};

// 暴露方法给父组件
defineExpose({
  handleExportClick,
});
</script>
